title: react文档1-8_列表 & Keys
date: 2018.9.14
tags:

• react.js
  toc_fold: unfold

2018.9.14 星期五 23:32

多组件渲染

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

基本列表组件

我们可以重构前面的例子到一个组件，它接受一个 numbers 数组，并输出一个元素的无序列表

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

键(Keys)

键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识：

如果列表项的顺序可能改变，我们不建议使用索引作为 keys。这可能会对性能产生负面影响，并可能导致组件状态问题。

$_TODO: 查阅 Robin Pokorny 的文章深入解释使用索引作为 键(key) 的负面影响 。 如果您选择不将明确的 键(key) 分配给列表项，那么 React 将默认使用索引作为键(key)。
$_TODO: 如果您有兴趣了解更多信息，请参阅 关于为什么必须输入 键(key) 的深入解释。

使用 keys 提取组件

keys 只在数组的上下文中存在意义。

例如，如果你提取 一个 ListItem 组件，应该把 key 放置在数组处理的 元素中，不能放在 ListItem 组件自身中的 <li> 根元素上。

keys 在同辈元素中必须是唯一的

在数组中使用的 keys 必须在它们的同辈之间唯一。然而它们并不需要全局唯一。我们可以在操作两个不同数组的时候使用相同的 keys ：

在 JSX 中嵌入 map()

在上面的例子中，我们单独声明了一个 listItems 变量，并在 JSX 中引用了该变量：
JSX允许在大括号中嵌入任何表达式，因此可以 内联 map() 结果：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
    // JSX允许在大括号中嵌入任何表达式，因此可以 内联 map() 结果：
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />

      )}
    </ul>
  );
}

有时这可以产生清晰的代码，但是这个风格也可能被滥用。
就像在 JavaScript 中，是否有必要提取一个变量以提高程序的可读性，这取决于你。但是记住，如果 map() 体中有太多嵌套，可能是提取组件的好时机。

23:51